<template>
  <div>
    <van-cell v-for="item in artistList" :key="item.ting_uid">
      <router-link
        tag="div"
        :to="{name:'artistDetail',params:{tinguid:item.ting_uid}}"
        class="artist-cell"
      >
        <img :src="item.avatar_middle" alt />
        <div class="name">{{item.name}}</div>
      </router-link>
    </van-cell>
  </div>
</template>

<script>
import { getArtistInfo } from "@api/music-api";

// 因为我们用的百度音乐接口，没有提供歌手列表接口，但是歌手详情的接口
const artistIdList = [
  "2517",
  "7994",
  "1091",
  "45561",
  "2507",
  "245815",
  "1077",
  "1204",
  "1117",
  "82366"
]; 

export default {
  created() {
    for (let artistId of artistIdList) {
      getArtistInfo(artistId).then(res => {
        this.artistList.push(res);
      });
    }
  },
  data() {
    return {
      artistList: []
    };
  }
};
</script>

<style lang="less" scoped>
.artist-cell {
  line-height: 50px;

  img {
    height: 50px;
    border-radius: 50%;
    float: left;
  }
  .name {
    float: left;
    margin-left: 20px;
    font-size: 16px;
    color: #999;
  }
}
</style>